<header>
  <div class="left">
    <button type="button" type="button" (click)="close()">
      <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "passwordHistory" | i18n }}</span>
  </h1>
  <div class="right">
    <button type="button" type="button" (click)="clear()">
      {{ "clear" | i18n }}
    </button>
  </div>
</header>
<main tabindex="-1">
  <div class="box list full-list" *ngIf="history && history.length">
    <div class="box-content">
      <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
        <div class="row-main">
          <div class="row-main-content">
            <div
              class="monospaced password-wrapper"
              [appCopyText]="h.password"
              [innerHTML]="h.password | colorPassword"
            ></div>
            <span class="detail">{{ h.date | date: "medium" }}</span>
          </div>
        </div>
        <div class="action-buttons">
          <button
            type="button"
            class="row-btn"
            appStopClick
            appA11yTitle="{{ 'copyPassword' | i18n }}"
            (click)="copy(h.password)"
          >
            <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="no-items" *ngIf="!history || !history.length">
    <p>{{ "noPasswordsInList" | i18n }}</p>
  </div>
</main>
